一、什么是響應(yīng)式？

響應(yīng)式就是通過合理的設(shè)計方案配合規(guī)范的技術(shù)實(shí)現(xiàn)策略，使同一個 Web頁面在各個終端（設(shè)備）不昆山網(wǎng)頁設(shè)計同分辨率屏幕上都能有最佳的用戶體驗(yàn)。

昆山網(wǎng)頁設(shè)計用時的感受，這些綜合因素最終影響著用戶使用后臺系統(tǒng)時的效率與體驗(yàn)。

二、響應(yīng)式響應(yīng)的是什么？

響應(yīng)就是系統(tǒng)對于外部變化的反饋跟適應(yīng)，響應(yīng)式就是系統(tǒng)做出這種反饋所依據(jù)的方案與策略。對于一個 Web頁面，外部昆山網(wǎng)頁設(shè)計的變化是指媒介（Media）與視窗（Viewport）的變化，媒介指 Web頁面運(yùn)行在哪些設(shè)備的屏幕上（手機(jī)、平板、PC、Mac等），視窗指瀏覽器用來顯示網(wǎng)頁內(nèi)容的窗口，也就是瀏覽器去掉標(biāo)簽欄、地址欄昆山網(wǎng)頁設(shè)計、工具欄之后顯示內(nèi)容的窗口大小。所以對于一個 Web頁面而言，響應(yīng)式響應(yīng)的就是媒介與視窗的變化，響應(yīng)的結(jié)果在視覺上表現(xiàn)為頁面在不同媒介、不同視窗下會有不同的布局結(jié)構(gòu)、版式

設(shè)計以及不同數(shù)量信息的展示。

三昆山網(wǎng)頁設(shè)計、響應(yīng)式的目的是什么？ 后臺系統(tǒng)做響應(yīng)式設(shè)計的目的：提高屏幕利用率，最大化操作效率。

提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內(nèi)容，在小屏幕上通過數(shù)據(jù)篩選展示關(guān)鍵信息。一直以來大家普遍認(rèn)為移動端碎昆山網(wǎng)頁設(shè)計片化嚴(yán)重，但實(shí)際上桌面端設(shè)備的分辨率也是有著不太均勻的分布，而隨著新設(shè)備的更新，更多高分辨率屏幕不斷加入，這種碎片化的趨勢會更加明顯，因而要想利用好每一塊屏幕，讓不同分辨率的用戶都有好的體驗(yàn)，顯然傳統(tǒng)昆山網(wǎng)頁設(shè)計固定的布局是做不到了。

昆山網(wǎng)頁設(shè)計看的數(shù)據(jù)為操作提供了依據(jù)，而操作支撐了公司或部門業(yè)務(wù)的正常運(yùn)行。所以后臺系統(tǒng)設(shè)計最基礎(chǔ)的目標(biāo)之一是如何通過良好的數(shù)據(jù)展示幫助用戶提高操作、決策效率，而充足的展示空間顯然是實(shí)現(xiàn)這一目標(biāo)的基礎(chǔ)，響應(yīng)式設(shè)計昆山網(wǎng)頁設(shè)計通過為每個分辨率設(shè)定合理的版式布局，使數(shù)據(jù)在每塊屏幕上都盡可能展示的最佳。優(yōu)化后的數(shù)據(jù)展示，幫助用戶更高效獲取信息，從而提高了用戶使用后臺系統(tǒng)的效率與體驗(yàn)。

四、為何要利用柵格系統(tǒng)來進(jìn)行響應(yīng)式設(shè)計

響應(yīng)式昆山網(wǎng)頁設(shè)計昆山網(wǎng)頁設(shè)計一對好搭檔。

五、利用柵格系統(tǒng)完成后臺頁面響應(yīng)式設(shè)計的步驟 1. 確立設(shè)計稿基準(zhǔn)尺寸

設(shè)計稿基準(zhǔn)尺寸是指我們從哪一個分辨率開始設(shè)計，也就是我們新建畫板時畫板的尺寸應(yīng)該是多大。而這個尺寸確定的主要依據(jù)是我們后昆山網(wǎng)頁設(shè)計臺系統(tǒng)所面向的主要用戶的屏幕分辨率；我們分兩大類情況來討論這個問題。

如果我們的系統(tǒng)是給公司內(nèi)部員工使用，由于公司批量采購設(shè)備的原因，公司內(nèi)部員工的屏幕分辨率往往會比較統(tǒng)一，這種情況下我們需要拿到這個數(shù)昆山網(wǎng)頁設(shè)計據(jù)，然后以它作為基準(zhǔn)尺寸開始設(shè)計。因?yàn)殡m然響應(yīng)式設(shè)計的目標(biāo)是讓頁面在每個分辨率下都有最佳的體驗(yàn)，但實(shí)際開發(fā)中畢竟存在損壞，設(shè)計還原很難100%，因而大多數(shù)情況下還是基于基準(zhǔn)尺寸的設(shè)計與開發(fā)，在用戶端顯昆山網(wǎng)頁設(shè)計示效果最佳、體驗(yàn)最好。

如果我們的系統(tǒng)是平臺級面向全網(wǎng)用戶，或者雖然是公司內(nèi)部使用，但是并不能統(tǒng)計到內(nèi)部員工屏幕分辨率情況，就可以以1440*900作為基準(zhǔn)尺寸開始設(shè)計。從統(tǒng)計數(shù)據(jù)來看，目前國內(nèi) PC端昆山網(wǎng)頁設(shè)計用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實(shí)際上是處于中間位置，如果以它為基準(zhǔn)設(shè)計，最終向上向下響應(yīng)適配后，相對誤差最小，從而達(dá)成用戶體驗(yàn)的最昆山網(wǎng)頁設(shè)計大公約數(shù)。

2. 確定頁面布局結(jié)構(gòu)

頁面的布局結(jié)構(gòu)，是頁面基本框架，后續(xù)的設(shè)計都是在這個大的框架下完成的，所以確定頁面基準(zhǔn)設(shè)計尺寸后，需要跟交互設(shè)計師或產(chǎn)品經(jīng)理配合，根據(jù)實(shí)際業(yè)務(wù)情況討論確定頁面布局結(jié)構(gòu)。昆山網(wǎng)頁設(shè)計一般來講，后臺系統(tǒng)有兩種最典型的頁面布局結(jié)構(gòu)：左右布局與上下布局。

上下布局的結(jié)構(gòu)在傳統(tǒng)網(wǎng)頁中非常常見，而在后臺系統(tǒng)中并不常用。這種布局的優(yōu)點(diǎn)是符合用戶認(rèn)知，遵循用戶從上而下瀏覽頁面獲取信息的習(xí)慣；貫穿昆山網(wǎng)頁設(shè)計全屏的導(dǎo)航欄設(shè)計也使頁面顯得正式穩(wěn)重，除卻導(dǎo)航欄之后相對較大的空間也為內(nèi)容展示提供了比較充足的空間。缺點(diǎn)是頂部一級導(dǎo)航受頁面寬度限制，數(shù)量會比較局限，同時導(dǎo)航層級較深時，交互效率也不夠理想。

左右布局，昆山網(wǎng)頁設(shè)計擁有側(cè)邊導(dǎo)航的左右布局頁面結(jié)構(gòu)，是在后臺系統(tǒng)中更常見的頁面布局形式。側(cè)邊導(dǎo)航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內(nèi)容，因此側(cè)邊導(dǎo)航比頂部導(dǎo)航能容納更多一級內(nèi)容昆山網(wǎng)頁設(shè)計昆山網(wǎng)頁設(shè)計右側(cè)內(nèi)容區(qū)域空間被擠掉部分，所以相對上下布局的結(jié)構(gòu)，左右布局的結(jié)構(gòu)，內(nèi)容區(qū)域空間會比較??；一般為了與頁面其它區(qū)域做區(qū)分，導(dǎo)航部分會用更深的顏色、安排更多的圖標(biāo)和文字，這也導(dǎo)致了在視覺上左右布局的頁面不昆山網(wǎng)頁設(shè)計夠平衡，會有左邊重右邊輕的感覺。

3. 對內(nèi)容區(qū)域建立柵格系統(tǒng)

根據(jù)不同的布局類型，對頁面內(nèi)容區(qū)域建立柵格系統(tǒng)。對于一個利用柵格系統(tǒng)做響應(yīng)式設(shè)計的頁面來講，主要有三大數(shù)值需要規(guī)范：Column、Gutte昆山網(wǎng)頁設(shè)計r、Margin；對于 Column、Gutter 我們在內(nèi)容中已經(jīng)有很詳細(xì)的介紹，不再贅述，而 Margin 是頁邊距，主要確定了內(nèi)容區(qū)域距離頁面邊緣的距離，它分布在內(nèi)容區(qū)域的兩側(cè)，主要作用是通過留昆山網(wǎng)頁設(shè)計白把內(nèi)容區(qū)域與周圍環(huán)境隔離出來，從而突出內(nèi)容區(qū)域的顯示，此外還可通過 Margin值來調(diào)整內(nèi)容區(qū)域顯示比例，使頁面在視覺上有更好的呈現(xiàn)效果。所以一個用于響應(yīng)式的柵格系統(tǒng)事實(shí)上由 Columns、Gut昆山網(wǎng)頁設(shè)計ters、Margins 三部分組成。